<template>
    <div>
        <div
        class="shopPic"
        :style="!shopImgCode ? 'max-height: 400px' : 'height: auto'"
        @click="shopImgLook"
      >
        <div class="yinying"></div>
        <div class="svg">
          <img
            :src="
              !svgImg
                ? require('@/assets/up.svg')
                : require('@/assets/down.svg')
            "
          />
        </div>
        <!---->
        <div class="description">
          <p>
            <img
              style="max-width: 100%;display: block;"
              :src="(imgUrl ? imgUrl : require('@/assets/error.jpg'))"
            />
            <!-- <van-image
              contain
              style="display: block;"
              :src="require('@/assets/1677420330mZU.jpg')"
            /> -->
            <!-- <br /> -->
          </p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    name: 'ShopPic',
    props:{
      imgUrl:String
    },
    data() {
        return {
            shopImgCode: false,
      svgImg: false,
        };
    },
    methods: {
        shopImgLook() {
            this.shopImgCode = !this.shopImgCode;
            this.svgImg = !this.svgImg;
        },
    },
    mounted() {
        
    },
};
</script>

<style scoped>

.shopPic {
  overflow: hidden;
  position: relative;
}
.yinying {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: url(@/assets/bg.png);
  height: 60px;
}
.svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  animation: myfirs_a 1.5s infinite;
}
@keyframes myfirs_a {
  0% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(0px, -10px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}
.description p {
  margin: 0;
}
</style>